import React from 'react';
import { observer } from 'mobx-react';
import Templet1 from './apiShowTemp/Templet1';
import Templet2 from './apiShowTemp/Templet2';
import DefaultTemplet from './apiShowTemp/DefaultTemplet';
import ApiSingleShowStore from './../../stores/apiStore/ApiSingleShowStore';

import { WeaAlertPage, WeaInputLocale, WeaLocaleProvider } from 'ecCom';
import { Spin } from 'antd';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;// 过滤多语言字符串
const getLabel = WeaLocaleProvider.getLabel;// 获取多语言

@observer
export default class ApiSingleShow extends React.Component {
  // 通过id和指定参数获取内容
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
      store: new ApiSingleShowStore(),
    };
  }
  componentWillMount() {
    const { initSingApiPage } = this.state.store;
    // console.log("this.props:", this.props);
    initSingApiPage(this.props);
  }
  componentWillReceiveProps(nextProps) {
    // console.log("this.props:", this.props);
    // console.log("nextProps:", nextProps);
    const { initSingApiPage } = this.state.store;
    const keyOld = this.props.frontPath;
    const keyNew = nextProps.frontPath;
    if (keyOld != keyNew) {
      initSingApiPage(nextProps);
    }
  }
  render() {
    const { showTemplet, apiId, singRequestParam, isSuccess, loading, msgcode, showAlertIcon, name, islist, showSpin, nameLink } = this.state.store;
    if (!loading) {
      if (isSuccess) {
        if (showTemplet == '0') {
          // console.log("islist:",islist)
          return (<DefaultTemplet
            ecId={`${this && this.props && this.props.ecId || ''}_DefaultTemplet@xpqxcg`}
            params={{ apiId, query: singRequestParam }}
            showAlertIcon={showAlertIcon}
            name={name}
            isList={islist}
            showSpin={showSpin}
            nameLink={nameLink}
          />);
        } else if (showTemplet == '1') {
          return (<Templet1
            ecId={`${this && this.props && this.props.ecId || ''}_Templet1@5xto11`}
            params={{ apiId, query: singRequestParam }}
            showAlertIcon={showAlertIcon}
            name={name}
            showSpin={showSpin}
            nameLink={nameLink}
          />);
        } else if (showTemplet == '2') {
          return (<Templet2
            ecId={`${this && this.props && this.props.ecId || ''}_Templet2@2lpuyk`}
            params={{ apiId, query: singRequestParam }}
            showAlertIcon={showAlertIcon}
            name={name}
            showSpin={showSpin}
          />);
        }
      } else {
        return (
          <div className="api_container_alertpage">
            {showAlertIcon ? <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@2vzjkw`}>  <div > {msgcode} </div> </WeaAlertPage> : msgcode}
          </div>
        );
      }
    } else {
      return (
        showSpin
          ?
          <div className="crm-api-span"> <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@58rhnv`} spinning={loading} size="large" tip={getLabel(384470, '正在读取数据...')} /></div>
          :
            <div>{getLabel(384470, '正在读取数据...')}</div>
      );
    }
  }
}
